<template>
	<view class="details">
		<!-- <uni-nav-bar title="提现记录" left-icon="left" @clickLeft="navBack" backgroundColor="#2CB9A4" color="#F8F8F8"></uni-nav-bar> -->
		<u-sticky style="background:#fff">
			<view class="tabs">
				<u-tabs :list="tabList" :scrollable='false' @click="selectTab" bg-color="#F5F5F5" lineColor="#2CB9A4"
					:current="tabIndex" @change="pickerChange" lineWidth="60" :activeStyle="{
			    color: '#2CB9A4',
			    transform: 'scale(1.05)'
			}"></u-tabs>
			</view>
		</u-sticky>
		<view class="listItem y-c" v-for="(i,index) in list" :key="index" >
			<view class="item_top y-c border">
				<view class="item_top_row x-bc mb-2">
					<view>提现方式：{{i.type_data === '0'?'微信':i.type_data ===1?'支付宝':"银行卡"}}</view>
					<view>¥{{i.actual_receipt}}</view>
				</view>
			</view>
			<view class="item_bot y-c">
				<view class="item_top_row x-bc mb-2 mt-2">
					<view class="next">提现时间：{{i.createtime}}</view>
					<view>
						<view>{{i.status === '0'?'待审核':i.status ==='1'?'已打款':'驳回'}}</view>
					</view>
				</view>
			</view>
			<view class="item_bot y-c">
				<view class="item_top_row x-bc mb-2 mt-2">
					<view class="next">提现金额：¥{{i.price}}</view>
					<view>
						<view>手续费：{{i.commission}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成...
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {
		withdrawalList
	} from '@/request/api.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					id: 3
				}, {
					name: '待审核',
					id: 0
				}, {
					name: '已打款',
					id: 1
				}, {
					name: '驳回',
					id: 2
				}],
				tabIndex: 0,
				form: {
					page: 1,
					status: 3,
				},
				list: [],
				last_page: 1
			};
		},
		onLoad() {
			this.form.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		methods: {
			pickerChange(e) {
				console.log(e)
				this.form.page = 1
				this.form.status = e.id
				this.list = []
				this.getList()
				// console.log(this.form, 111)
			},
			async getList() {
				let res = await withdrawalList(this.form)
				this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
				console.log(res, '提现列表')
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs {
		background: #fff;
		margin-left: -15rpx;
		margin-right: -15rpx;
	}

	.details {
		font-size: 28rpx;
		padding: 0 20rpx 20rpx 20rpx;

		.tabs {
			width: 100%;
		}

		.listItem {
			color: $common-color;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.item_over {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.border {
			border-bottom: 0.5rpx solid rgba(217, 217, 217, 0.6);
		}

		.item_bot {
			.next {
				color: #BABABA;
			}

			.image {
				width: 116rpx;
				height: 100rpx;
			}
		}
	}
</style>